<template>
  <div v-if="showPreviewFile" class="je-admin-file-preview">
    <PreviewFile :file-list="filePreviewList" :file-item="filePreviewItem" />
  </div>
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { PreviewFile } from '@jecloud/ui';
  import { useRouter } from '@common/router';
  import { getFileDataByKeys } from '@/data/api/preview';
  export default defineComponent({
    name: 'File',
    components: { PreviewFile },
    setup() {
      const router = useRouter();
      const { keys, key } = router.currentRoute.value.params;
      const filePreviewList = ref([]); //文件列表
      const filePreviewItem = ref(null); //正在预览的文件
      const showPreviewFile = ref(false); //预览文件显示状态
      //根据文件keys获取对应文件信息
      getFileDataByKeys({ keys: keys }).then((res) => {
        if (res.success) {
          filePreviewList.value = res.data;
          if (key) {
            filePreviewList.value.forEach((file) => {
              if (file.fileKey == key) {
                filePreviewItem.value = file;
              }
            });
          }
          showPreviewFile.value = true;
        }
      });
      return {
        filePreviewList,
        filePreviewItem,
        showPreviewFile,
      };
    },
  });
</script>
<style scoped lang="less">
  .je-admin-file-preview {
    width: 100%;
    height: 100%;
  }
</style>
